<template>
  <transition name="dialog-fade">
    <el-dialog
      v-if="typeDialog"
      :title="dialogTitle"
      class="dialog-addtype"
      :visible.sync="typeDialog"
      width="50%"
      append-to-body
      @close="closeDialog(0)"
    >
      <el-form
        ref="formInfo"
        :model="formInfo"
        class="demo-form-inline"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="类别名" prop="typename">
          <el-input v-model="formInfo.typename"></el-input>
        </el-form-item>
        <el-form-item label="类别前缀" prop="typenamebefore">
          <el-input v-model="formInfo.typenamebefore">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="类别消耗点" prop="point">
          <el-input v-model="formInfo.point">
            <template slot="append">点/小时</template>
          </el-input>
          <div style="color:#AFAFAF;font-size:14px">*用于实际结算</div>
        </el-form-item>
        <el-form-item label="日封顶点" prop="daytop">
          <el-input v-model="formInfo.daytop">
            <template slot="append">点</template>
          </el-input>
          <div style="color:#AFAFAF;font-size:14px">*设为0则为不封顶</div>
        </el-form-item>
        <!-- <el-form-item label="提前？天数预定" prop="beforeday">
          <el-input v-model="formInfo.beforeday">
            <template slot="append">天</template>
          </el-input>
          <div style="color:#AFAFAF;font-size:14px">*设为0则为不限制</div>
        </el-form-item>-->
        <el-form-item label="可预订？天内的座位" prop="canbeforeday">
          <el-input v-model="formInfo.canbeforeday">
            <template slot="append">天</template>
          </el-input>
          <div style="color:#AFAFAF;font-size:14px">*预定天数不能小于1</div>
        </el-form-item>
        <el-form-item label="单次预定最少分钟数" prop="minnum">
          <el-input v-model="formInfo.minnum">
            <template slot="append">分钟</template>
          </el-input>
          <div style="color:#AFAFAF;font-size:14px">*设为0则为不限制</div>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="formInfo.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="类别说明" prop="typesay">
          <el-input type="textarea" placeholder="请输入内容" v-model="formInfo.typesay"></el-input>
        </el-form-item> -->
        <el-form-item style="text-align: right;">
          <el-button type="primary" @click="submitForm('formInfo')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </transition>
</template>

<script>
import { genreAdd } from "@/api/user";
import Base64 from "@/utils/base";
export default {
  name: "DialogAddtype",
  props: {
    dialogTitle: {
      type: String,
      default: ""
    },
    itemInfo: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  inject: ["reload"],
  data() {
    return {
      rules: {
        typename: [
          { required: true, message: "请输入类别名称", trigger: "change" }
        ],
        typenamebefore: [
          { required: true, message: "请输入类别前缀", trigger: "change" }
        ],
        point: [{ required: true, message: "请输入点数", trigger: "change" }],
        daytop: [
          { required: true, message: "请输入日封顶点", trigger: "change" }
        ],
        // beforeday: [
        //   { required: true, message: "提前？天数预定", trigger: "change" }
        // ],
        canbeforeday: [
          { required: true, message: "可预订？天内的座位", trigger: "change" }
        ],
        // typesay: [
        //   { required: true, message: "请输入类别说明", trigger: "change" }
        // ],
        price: [{ required: true, message: "请输入价格", trigger: "change" }]
      },
      typeDialog: false,
      formInfo: {
        // typename: "",
        shop: "1",
        domains: [
          {
            value: ""
          }
        ]
      },
      uservalue: false
    };
  },
  mounted() {},
  methods: {
    removeDomain(item) {
      var index = this.formInfo.domains.indexOf(item);
      if (index !== -1) {
        this.formInfo.domains.splice(index, 1);
      }
    },
    addDomain() {
      this.formInfo.domains.push({
        value: "",
        key: Date.now()
      });
    },
    //   获取下拉框
    // getOpt() {
    //   this.getRequest('/asset/getTypeList', {}).then(res => {
    //     this.options = res.obj
    //   })
    // },
    // 保存操作
    submitForm(formName) {
      // console.log(this.formInfo);
      // return;
      this.$refs[formName].validate(valid => {
        if (valid) {
          let parmes = {
            title: this.formInfo.typename,
            letter: this.formInfo.typenamebefore,
            point: this.formInfo.point,
            vertex: this.formInfo.daytop,
            // reserve: this.formInfo.beforeday,
            seat: this.formInfo.canbeforeday,
            minute: this.formInfo.minnum,
            price: this.formInfo.price,
            desc: ""
            // desc: this.formInfo.typesay
          };
          if (this.formInfo.canbeforeday == "0") {
            this.$message({
              message: "预定天数需大于0",
              type: "warning"
            })
            return
          }
          genreAdd({
            request_data: Base64.encode(JSON.stringify(parmes))
          }).then(res => {
             if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
            this.$message({
              message: "操作成功！",
              type: "success"
            });
          });
          this.closeDialog();
          this.reload();
          // 走保存请求
        } else {
          return false;
        }
      });
    },
    // 关闭弹框
    closeDialog(flag) {
      this.$refs["formInfo"].resetFields();
      this.typeDialog = false;
      this.$emit("closeDialog", flag);
    }
  }
};
</script>

<style scoped lang="scss">
.dialog-fade-enter-active {
  -webkit-animation: dialog-fade-in 0.3s;
  animation: dialog-fade-in 0.3s;
}
.dialog-fade-leave-active {
  -webkit-animation: dialog-fade-out 0.3s;
  animation: dialog-fade-out 0.3s;
}
@-webkit-keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
@keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
.delcont {
  cursor: default;
  width: 20px;
  height: 20px;
}
.imgposi {
  height: 40px;
  position: absolute;
  display: flex;
  align-items: center;
  right: 10px;
  width: 60px;
  justify-content: space-between;
  top: 50%;
  transform: translateY(-50%);
}
.addcont {
  cursor: default;
  width: 20px;
  height: 20px;
}
.solt {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}
// .el-input__inner{
//     padding-left: 38px !important;
// }
</style>
